<template>
    <div :style="{height:divHeight + 'px'}">
        <div style="display:flex;flex-direction:column;height:100%">
            <Form ref="queryForm" :model="dataToQuery" :label-width="120">
                <Row v-show="!switchFlag" class="query-form" >
                    <Col span="8">
                        <FormItem label='日期：' prop='date'>
                            <DatePicker class="query-form-el" :clearable="false" placeholder="请选择日期" v-model='dataToQuery.date' type="date"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="16">
                        <Button @click="reset" class="ivu-btn-reset">重置</Button>
                        <Button type="primary" class="ivu-btn-query" icon="md-search"  @click="query">查询</Button>
                    </Col>
                </Row>
                <Row class="query-form">
                    <Col span="24">
                        <Button type="primary" class="ivu-btn-add"   icon="md-cloud-download"  @click="exportExecl">导出</Button>
                    </Col>
                </Row>
            </Form>
            <div style="flex-grow:1;display:flex;flex-direction:column;justify-content=center;align-items:center;width:100%;" >
                <Spin size="large" style="height:100%" v-if="loading"></Spin>
                <table border="1" v-else cellpadding="10" cellspacing="0" style="width:80%">
                    <caption  style="text-align:center">重污染天气响应及政府检查情况日报（{{dailyDate}}）</caption>
                    <tr align="left">
                        <td colspan="7">重污染天气响应</td>
                    </tr>
                    <tr  align="center">
                        <td style="width:60px">序号</td>
                        <td>区域</td>
                        <td>企业名称</td>
                        <td>发布单位</td>
                        <td style="width:100px">预警级别</td>
                        <td style="width:120px">预警开始时间</td>
                        <td style="width:120px">预警结束时间</td>
                    </tr>
                    <tr align="center" v-for="(item,index) in warningResponseDatas">
                        <td>{{index+1}}</td>
                        <td>{{item.attriEreaName}}</td>
                        <td>{{item.companyName}}</td>
                        <td>{{item.WARNING_UNIT}}</td>
                        <td>{{item.warningLevelName}}</td>
                        <td>{{item.warningPeriodFrom}}</td>
                        <td>{{item.warningPeriodTo}}</td>
                    </tr>
                    <tr align="left">
                        <td colspan="7">政府检查情况</td>
                    </tr>
                    <tr  align="center">
                        <td>序号</td>
                        <td>企业名称</td>
                        <td>检查级别</td>
                        <td>检查内容</td>
                        <td>检查问题</td>
                        <td colspan="2">整改进展</td>
                    </tr>
                    <tr align="center" v-for="(item,index) in inspectRptDatas">
                        <td>{{index+1}}</td>
                        <td v-if="item.index == 0" :rowspan="item.length" class="desc">
                            <Tooltip class="desc" placement="top" :transfer="true">
                                <p class="desc">{{item.companyName}}</p>
                                <div slot="content" style="white-space: normal;">
                                    <p>{{item.companyName}}</p>
                                </div>
                            </Tooltip>
                        </td>
                        <td v-if="item.index == 0" :rowspan="item.length" class="desc">
                            <Tooltip class="desc" placement="top" :transfer="true">
                                <p class="desc">{{item.inspectionGroupCategoryName}}</p>
                                <div slot="content" style="white-space: normal;">
                                    <p>{{item.inspectionGroupCategoryName}}</p>
                                </div>
                            </Tooltip>
                        </td>
                        <td v-if="item.index == 0" :rowspan="item.length" class="desc">
                            <Tooltip class="desc" placement="top" :transfer="true">
                                <p class="desc">{{item.contentIssue}}</p>
                                <div slot="content" style="white-space: normal;">
                                    <p>{{item.contentIssue}}</p>
                                </div>
                            </Tooltip>
                        </td>
                        <td class="desc">
                            <Tooltip class="desc" placement="top" :transfer="true">
                                <p class="desc">{{item.problemDesc}}</p>
                                <div slot="content" style="white-space: normal;">
                                    <p>{{item.problemDesc}}</p>
                                </div>
                            </Tooltip>
                        </td>
                        <td class="desc" colspan="2">
                            <Tooltip placement="top" :transfer="true">
                                <p class="desc">{{item.completion}}</p>
                                <div slot="content" style="white-space: normal;">
                                    <p>{{item.completion}}</p>
                                </div>
                            </Tooltip>
                        </td>
                    </tr>
                </table>
                <div style="height:20px"></div>
            </div>
        </div>
        <div v-show="downloading"
             style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:99999;background-color:#000000;opacity:0.5;">
            <svg-bar style="position:absolute;top:50%;left:50%;margin-left:-100px;margin-top:-100px"
                     :options="options" :value="batchProcess"></svg-bar>
        </div>
    </div>
</template>
<script>
    import {formatDate, verifyIdCard, createFormAndSubmit} from '@/tools/index'
    import {Api} from '@/api/index.js'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
	import { sessionStorage } from '@/common/cacheUtils.js'
    import svgBar from 'svg-progress-bar'
   
    export default {
        name: "dailyPaper",
        components:{
            svgBar,
            cascaderDom
        },
        data(){
            return {
                ...this.createCommonDataField(),
                loading:true,
                divHeight:0,
                dailyDate:"",
                batchProcess: 0,
                downloading: false,
                warningResponseDatas:[         
                ],
                inspectRptDatas:[
                ],
            }
        },
        computed: {
            options: function() {
                return {
                    radius: 50,//大小
                    duration: 2,//变化时间长度
                    circleWidth: 5,//圆环宽度
                    pathColors: ['#A2A2A2', '#FA5657'], //圆环 底色和 上面的颜色
                    circleLineCap: 'round',//进度条 形状  圆环 或者矩形
                    text: function (value) {
                        return this.htmlifyNumber(value) + '<span style="font-size: 0.4em;">%</span>';
                    },
                    textColor: 'rgb(33, 150, 243)'
                }
            }
        },
        async mounted(){
            this.divHeight = window.innerHeight - 125;
            var date = new Date();
            this.dailyDate = date.getMonth()+1 + "月" + date.getDate() + "日";
            this.query();
        },
        methods:{
            ...pageCommonFunction,
            query(){
                this.loading = true;
                if(this.dataToQuery.date == ""){
                    this.dataToQuery.date = formatDate(new Date(), "yyyy-MM-dd")
                }else{
                    this.dataToQuery.date = formatDate(new Date(this.dataToQuery.date), "yyyy-MM-dd")
                }
                let url = Api.enDailyPaperView
                this.$http.get(url, {params: this.dataToQuery}).then((res) => {
                    this.loading = false;
                    if(res.data.status == 200){
                        var date = new Date(this.dataToQuery.date);
                        this.dailyDate = date.getMonth()+1 + "月" + date.getDate() + "日";
                        this.warningResponseDatas = res.data.data.warningResponseDatas;
                        this.inspectRptDatas = res.data.data.inspectRptDatas;
                    }else{
                        this.$Message.error("数据获取失败");
                    }
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            exportExecl(){
                this.downloading = true;
                if(this.dataToQuery.date == ""){
                    this.dataToQuery.date = formatDate(new Date(), "yyyy-MM-dd")
                }else{
                    this.dataToQuery.date = formatDate(new Date(this.dataToQuery.date), "yyyy-MM-dd")
                }
                var _this = this;
                this.$http.get(Api.enDailyPaperExport,{
                        params:  this.dataToQuery,
                        responseType: 'blob',
                        progress:function(e){
                            _this.batchProcess = 100 * (e.loaded / e.total);
                            if(_this.batchProcess == 100){
                                _this.downloading = false;
                            }
                        }
                    }).then((res) => {
                        const aLink = document.createElement("a");
                        let blob = new Blob([res.data], {
                            type: "application/vnd.ms-excel"
                        })
                        aLink.href = URL.createObjectURL(blob);
                        aLink.download = "重污染天气响应及政府检查情况日报("+ formatDate(new Date(), "yyyy-MM-dd")+ ").xlsx" //标题
                        aLink.click();
                        document.body.appendChild(aLink);
                        this.downloading = false;
                    }, function(res){
                        this.$Message.error('生成失败');
                        this.downloading = false;
                    })            
            }
        }
    }
</script>
<style  scoped>
 @import '../../../../index.css';
 table,td{border:1px solid #ccc;border-collapse:collapse;}

 table {
     table-layout: fixed;
     width: 100%;
 }
 table, th, td {
     border: 1px solid #999;
     padding: 5px;
     text-align: center;
 }

 .desc {
     width:100%;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

</style>